<template>
	<image src="https://hzybucket.obs.cn-south-1.myhuaweicloud.com/we_chat/top-bg.png" class="bg-color" mode="aspectFill"></image>
	<z-paging ref="paging" :refresher-enabled="false">
		<!-- 之后-vue3 -->
		<template #top>
			<uv-navbar autoBack bgColor="rgba(0,0,0,0)" :fixed="false" title=""></uv-navbar>
		</template>
		<block #refresher="{ refresherStatus }">
			<custom-refresher :status="refresherStatus" />
		</block>
		<view class="login-title">欢迎登录</view>
		<view class="login-desc">{{ tabActive == 0 ? '未注册的手机号将自动创建为账号' : '未注册用户请选择免密登录' }}</view>
		<view class="login-box">
			<view class="login-box-bgcolor"></view>
			<view class="login-box-bg">
				<image class="img" :src="tabActive == 0 ? '../../static/image/login-tab-bg.png' : '../../static/image/login-tab-bg_.png'" mode="widthFix"></image>
			</view>
			<view class="tab-box">
				<view @click="tabClick(index)" :class="tabActive == index ? 'tab-item tab-item-active' : 'tab-item'" v-for="(item, index) in tabList" :key="index">{{ item }}</view>
			</view>
			<view class="login-data-box" v-if="tabActive == 0">
				<view class="login-item">
					<view class="login-item-title">手机号</view>
					<view class="login-item-input-box">
						<input maxlength="11" type="number" v-model="loginData.phone" placeholder-class="placeholder-class" placeholder="请输入手机号" class="login-item-input" />
					</view>
				</view>
				<view class="login-item">
					<view class="login-item-title">验证码</view>
					<view class="login-item-input-box" style="padding-right: 0">
						<input type="digit" v-model="loginData.codeNum" placeholder-class="placeholder-class" placeholder="请输入验证码" class="login-item-input-code" />
						<view @click="smsCodeClick" class="login-item-code-btn" :style="smsNum > 0 ? 'opacity: .7;' : ''">
							{{ smsNum > 0 ? smsNum + 'S后重新获取' : '获取验证码' }}
						</view>
					</view>
				</view>
			</view>
			<view class="login-data-box" v-if="tabActive == 1">
				<view class="login-item">
					<view class="login-item-title">手机号</view>
					<view class="login-item-input-box">
						<input type="number" v-model="loginData.phone" placeholder-class="placeholder-class" placeholder="请输入手机号" class="login-item-input" />
					</view>
				</view>
				<view class="login-item">
					<view class="login-item-title">密码</view>
					<view class="login-item-input-box">
						<input type="password" v-model="loginData.password" placeholder-class="placeholder-class" placeholder="请输入密码" class="login-item-input" />
					</view>
				</view>
			</view>
			<uv-button
				type="primary"
				text="登 录"
				customTextStyle="font-weight: 500;font-size: 36rpx;color: #FFFFFF;"
				customStyle="margin: 100rpx 55rpx 50rpx;width: 580rpx;height: 112rpx;background: #3B75FF;border-radius: 14rpx;"
				@click="submitFunc"
			></uv-button>
		</view>
	</z-paging>
	<!-- 头像昵称弹窗 -->
	<uv-popup ref="userDataPopup" @change="" round="20">
		<view class="userData-box">
			<view class="userData-box-title">
				<image src="../../static/logo.png" class="userData-box-title-icon"></image>
				<view class="userData-box-title-text">
					全能狮
					<text class="text">申请</text>
				</view>
			</view>
			<view class="userData-box-title-desc">获取你的昵称、头像</view>
			<view class="choose-avatar">
				<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<image class="avater" mode="aspectFill" :src="loginData.userImg"></image>
					<view class="userImg-text">点击选择头像</view>
				</button>
			</view>
			<view class="choose-avatar">
				<input class="userName-text" type="nickname" name="nickname" v-model="loginData.userName" placeholder="请输入昵称" />
			</view>
			<view class="btn-box">
				<uv-button @click="cancelFunc" customStyle="width:300rpx;border:1rpx solid #f2f2f2;" type="" text="暂不选择"></uv-button>
				<uv-button @click="qrLoginFunc" customStyle="width:300rpx;" type="primary" text="确 定"></uv-button>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
import { array, object, mobile, empty } from '@/uni_modules/uv-ui-tools/libs/function/test.js';
import { ref, reactive, toRefs, toRef, getCurrentInstance, onMounted } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';
const { proxy: that } = getCurrentInstance();

onLoad(() => {
	let userInfo = uni.getStorageSync('userInfo');
	console.log(userInfo, 'userInfo');
	// 如果openid不存在  请求
	if (!userInfo) {
		wxGetOpenId();
		return;
	}
	if (!userInfo.openid) {
		wxGetOpenId();
		return;
	}
});
const data = reactive({
	tabList: ['免密登录', '账号登录'],
	tabActive: 0,
	smsNum: 0,
	loginData: {
		phone: '',
		password: '',
		codeNum: '',
		userImg: '',
		userName: ''
	}
});
let { loginData, tabList, tabActive, smsNum, userImg } = toRefs(data);
let tabClick = (index) => {
	data.tabActive = index;
};
const chooseavatar = (e) => {
	console.log(e, '头像');
	data.loginData.userImg = e.detail.avatarUrl;
};
// 获取openid 用户信息
const wxGetOpenId = (code) => {
	uni.showLoading({
		mask: true
	});
	uni.login({
		timeout: 5000,
		success(login) {
			that.$Api
				.wxGetOpenId({
					code: login.code,
					openid: ''
				})
				.then((res) => {
					console.log(res, 'openid');
					uni.hideLoading();
					if (res.code == 200) {
						uni.setStorageSync('userInfo', res.data);
					}
				})
				.catch((err) => {
					console.log(err);
					uni.hideLoading();
				});
		},
		fail(err) {
			console.log(err);
			uni.hideLoading();
		}
	});
};
let smsCodeClick = () => {
	if (data.smsNum != 0) {
		uni.showToast({
			title: '请勿频繁操作',
			icon: 'error'
		});
		return;
	}
	let { phone, password, codeNum } = data.loginData;
	console.log(phone, '手机号');
	if (!mobile(phone)) {
		uni.showToast({
			title: '请输入正确手机号',
			icon: 'error'
		});
		return;
	}
	uni.showLoading({
		mask: true
	});
	that.$Api
		.wxPhoneSendSms({
			phone
		})
		.then((res) => {
			console.log(res, '获取验证码');
			uni.hideLoading();
			if (res.code == 200) {
			}
		})
		.catch((err) => {
			uni.hideLoading();
		});
	data.smsNum = 60;
	let Interval = setInterval(() => {
		data.smsNum--;
		if (data.smsNum < 1) {
			clearInterval(Interval);
		}
	}, 1000);
};
let submitFunc = () => {
	let loginData = data.loginData;
	let tabActive = data.tabActive;
	let { phone, password, codeNum } = data.loginData;
	if (!mobile(phone)) {
		uni.showToast({
			title: '请输入正确手机号',
			icon: 'error'
		});
		return;
	}
	switch (tabActive) {
		case 0:
			if (empty(codeNum)) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'error'
				});
				return;
			}
			that.$refs.userDataPopup.open('bottom');
			break;
		case 1:
			if (empty(password)) {
				uni.showToast({
					title: '请输入密码',
					icon: 'error'
				});
				return;
			}
			that.$refs.userDataPopup.open('bottom');
			break;
		default:
	}
};
const qrLoginFunc = () => {
	let { phone, password, codeNum, userImg, userName } = data.loginData;
	if (!userImg) {
		uni.showToast({
			title: '请选择头像',
			icon: 'error'
		});
		return;
	}
	if (!userName) {
		uni.showToast({
			title: '请输入昵称',
			icon: 'error'
		});
		return;
	}
	uni.showLoading({
		mask: true,
		title: '头像上传中...'
	});
	that.$upload([{ path: userImg }])
		.then((res) => {
			console.log(res, '文件上传');
			uni.hideLoading();
			wxLogin({
				phone,
				sms_code: codeNum,
				type: data.tabActive == 0 ? 1 : 2,
				head_image: res.arrResult[0].file_url,
				nickname: userName,
				password
			});
		})
		.catch((err) => {
			uni.hideLoading();
		});
};
const cancelFunc = () => {
	let { phone, password, codeNum, userImg, userName } = data.loginData;
	wxLogin({
		phone,
		sms_code: codeNum,
		type: data.tabActive == 0 ? 1 : 2,
		head_image: '',
		nickname: '',
		password
	});
};
let wxLogin = (data) => {
	console.log(data);
	uni.showLoading({
		mask: true,
		title: '登录中...'
	});
	let userInfo = uni.getStorageSync('userInfo');
	console.log(userInfo, 'userInfo');
	data.openid = userInfo.openid; //userInfo.openid
	that.$Api
		.wxLogin(data)
		.then((res) => {
			uni.hideLoading();
			console.log(res, '登录');
			if (res.code == 200) {
				res.data.openid = userInfo.openid;
				res.data.empower = 1;
				uni.setStorageSync('userInfo', res.data);
				uni.navigateTo({
					url: '/pages/authorize/authorize'
				});
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
				that.$refs.userDataPopup.close();
			}
		})
		.catch((err) => {
			console.log(err, '错误');
			uni.hideLoading();
			uni.showToast({
				title: err.message,
				icon: 'none'
			});
			that.$refs.userDataPopup.close();
		});
};
</script>

<style lang="scss" scoped>
.userData-box {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;

	.userData-box-title-desc {
		margin-bottom: 30rpx;
		font-size: 34rpx;
		font-weight: bold;
	}

	.userData-box-title {
		display: flex;
		align-items: center;
		width: 100%;

		.userData-box-title-icon {
			width: 100rpx;
			height: 100rpx;
			margin-right: 30rpx;
		}

		.userData-box-title-text {
			font-size: 28rpx;
			font-weight: bold;

			.text {
				font-size: 24rpx;
				margin-left: 20rpx;
				font-weight: normal;
			}
		}
	}

	.choose-avatar {
		width: 100%;
		border-bottom: 1rpx solid #f2f2f2;
		padding: 10rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.userName-text {
			width: 100%;
			height: 100rpx;
			text-align: center;
		}

		button {
			border: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, 0);

			.userImg-text {
				font-size: 24rpx;
				text-align: center;
			}

			&::after {
				border: none;
			}

			.avater {
				width: 130rpx;
				height: 130rpx;
				border-radius: 30rpx;
				background-color: #f2f2f2;
			}
		}
	}

	.btn-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 20rpx;
	}
}

.bg-color {
	width: 100%;
	height: 708rpx;
	position: fixed;
	z-index: -1;
}

.login-title {
	font-weight: 500;
	font-size: 72rpx;
	color: #000000;
	margin: 54rpx 58rpx 26rpx;
}

.login-desc {
	font-weight: 400;
	font-size: 32rpx;
	color: #7c7f84;
	margin-left: 58rpx;
}

.login-box {
	// background-color: #fff;
	width: 690rpx;
	margin: 60rpx 30rpx 0;
	border-top-left-radius: 50rpx;
	border-top-right-radius: 50rpx;
	position: relative;
	overflow: hidden;

	.login-box-bgcolor {
		// background-color: #f5f8ff;
		width: 100%;
		height: 200rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.login-box-bg {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;

		.img {
			width: 100%;
		}
	}

	.tab-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1;

		.tab-item {
			flex: 1;
			text-align: center;
			font-weight: 500;
			margin: 34rpx 0;
			font-size: 32rpx;
			color: #000000;
			position: relative;

			&::after {
				transition: all 0.2s;
				content: '';
				position: absolute;
				bottom: -36rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 36rpx;
				height: 8rpx;
				background: rgba(0, 0, 0, 0);
				border-radius: 2rpx;
			}
		}

		.tab-item-active {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				bottom: -36rpx;
				left: 50%;
				transform: translate(-50%, 0);
				width: 36rpx;
				height: 8rpx;
				background: #3b75ff;
				border-radius: 2rpx;
			}
		}
	}

	.login-data-box {
		width: 100%;
		padding: 0 50rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		margin-top: 110rpx;

		.login-item {
			width: 590rpx;
			margin-bottom: 48rpx;

			.login-item-title {
				font-weight: 500;
				font-size: 32rpx;
				color: #464646;
				margin-bottom: 24rpx;
			}

			.login-item-input-box {
				width: 100%;
				background: #f5f8ff;
				border-radius: 8rpx;
				height: 96rpx;
				padding: 28rpx 36rpx;
				box-sizing: border-box;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.login-item-input {
					width: 100%;
					height: 100%;
					font-size: 28rpx;
				}

				.placeholder-class {
					font-weight: 400;
					font-size: 28rpx;
					color: #000;
				}

				.login-item-input-code {
					width: 300rpx;
					font-size: 28rpx;
					border-right: 1rpx solid #d3d7db;
				}

				.login-item-code-btn {
					width: 240rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #3b75ff;
					text-align: center;
				}
			}
		}
	}
}
</style>
